<template>
  <basic-dialog
    :width="'40%'"
    :visible.sync="visible"
    :title="'关闭原因'"
    :handle-close="handleCloseDialog"
    :handle-ok="handleConfirm"
    :loadingBtn="confirmLoading"
    :okText="'提交'"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formValidate"
    >
      <el-form-item label="" prop="closeReason">
        <el-input
          type="textarea"
          v-model.trim="formData.closeReason"
          placeholder="请填写关闭原因"
          show-word-limit
          maxlength="1000"
          rows="4"
        />
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import {
  closeSupplierAccountService
} from '@/api/supplier/management/supplierAccount';

export default {
  components: {
    BasicDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      confirmLoading: false,
      formData: {
        closeReason: '',
      },
      formValidate: {
        closeReason: [
          { required: true, message: '请输入关闭原因', trigger: 'change' }
        ],
      },
    };
  },
  methods: {
    // 关闭弹框
    handleCloseDialog () {
      this.$refs.formData.resetFields();
      this.$emit('update:visible', false);
    },
    handleConfirm () {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          const param = {
            ...this.params,
            ...this.formData
          };
          this.closeSupplierAccount(param)
        }
      });
    },
    async closeSupplierAccount (param) {
      const res = await closeSupplierAccountService(
        param,
        state => { this.confirmLoading = state }
      );
      if (res) {
        this.$message.success('操作成功')
        this.$emit('getTableData');
        this.handleCloseDialog();
      }
    },
  }
};
</script>
<style scoped>
.el-select, .el-date-editor.el-input {
  width: 100%;
}
</style>
